<template>
  <div>

    <SkyCardPanel title="多表单提交">
      <div slot="header-right">
        <SkyButton type="primary" @click="submitForm('SkyForm')">提交</SkyButton>
      </div>
      <div slot="main">

        <SkyForm :model="form" :rules="rules" ref="SkyForm">

          <div style="margin-bottom:20px">
            <SkyFormItem label="用户名" :prop="'info.username'">
              <SkyInput v-model="form.info.username"></SkyInput>
            </SkyFormItem>
            <SkyFormItem label="密码" :prop="'info.password'">
              <SkyInput v-model="form.info.password"></SkyInput>
            </SkyFormItem>
            <SkyFormItem label="存款" :prop="'info.money'">
              <SkyInput v-model="form.info.money" v-thousands.money="form.info" ></SkyInput>
            </SkyFormItem>
            <!-- <SkyFormItem label="日期" :prop="'info.date'">
              <SkyDateInput v-model="form.info.date"></SkyDateInput>
            </SkyFormItem> -->
            <SkyFormItem label="描述" :prop="'info.describe'">
              <SkyTextarea :rows="10" v-model="form.info.describe"></SkyTextarea>
            </SkyFormItem>
          </div>

          <SkyTable style="margin-bottom:20px" v-slot="row" :data="form.tableData" @getCurrent="getCurrent">
            <SkyColumn :row="row.scope" prop="name" width="250" label="名称">

              <SkyFormItem :prop="`tableData[${row.index}].name`" :rules="[
              { required: true, message: '请输入名称', trigger: 'blur' },
              ]">
                <SkyInput v-model="row.scope.name" placeholder="请输入名称"></SkyInput>
              </SkyFormItem>

            </SkyColumn>
            <SkyColumn :row="row.scope" prop="type" label="单据类型"> </SkyColumn>
            <SkyColumn :row="row.scope" prop="havemoney" label="已分摊金额"></SkyColumn>
            <SkyColumn :row="row.scope" prop="waitmoney" label="未分摊金额"></SkyColumn>
          </SkyTable>

          <SkyTable v-slot="row" :data="form.tableData1" @getCurrent="getCurrent">
            <SkyColumn :row="row.scope" prop="name" width="250" label="名称">

              <SkyFormItem :prop="`tableData1[${row.index}].name`" :rules="[
              { required: true, message: '请输入名称', trigger: 'blur' },
              ]">
                <SkyInputPopUp v-model="row.scope.name" placeholder="请输入名称"></SkyInputPopUp>
              </SkyFormItem>

            </SkyColumn>
            <SkyColumn :row="row.scope" prop="type" label="单据类型"> </SkyColumn>
            <SkyColumn :row="row.scope" prop="havemoney" label="已分摊金额"></SkyColumn>
            <SkyColumn :row="row.scope" prop="waitmoney" label="未分摊金额"></SkyColumn>
          </SkyTable>
        </SkyForm>

      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">

        &lt;SkyButton type="primary" @click="submitForm('SkyForm')"&gt;提交&lt;/SkyButton&gt;         
              
        &lt;SkyForm :model="form" :rules="rules" ref="SkyForm"&gt;

          &lt;div style="margin-bottom:20px"&gt;
            &lt;SkyFormItem label="用户名" :prop="'info.username'"&gt;
              &lt;SkyInput v-model="form.info.username"&gt;&lt;/SkyInput&gt;
            &lt;/SkyFormItem&gt;
            &lt;SkyFormItem label="密码" :prop="'info.password'"&gt;
              &lt;SkyInput v-model="form.info.password"&gt;&lt;/SkyInput&gt;
            &lt;/SkyFormItem&gt;
            &lt;SkyFormItem label="存款" :prop="'info.money'"&gt;
              &lt;SkyInput v-model="form.info.money" v-thousands.money="form.info" &gt;&lt;/SkyInput&gt;
            &lt;/SkyFormItem&gt;
            <!-- &lt;SkyFormItem label="日期" :prop="'info.date'"&gt;
              &lt;SkyDateInput v-model="form.info.date"&gt;&lt;/SkyDateInput&gt;
            &lt;/SkyFormItem&gt; -->
            &lt;SkyFormItem label="描述" :prop="'info.describe'"&gt;
              &lt;SkyTextarea :rows="10" v-model="form.info.describe"&gt;&lt;/SkyTextarea&gt;
            &lt;/SkyFormItem&gt;
          &lt;/div&gt;

          &lt;SkyTable style="margin-bottom:20px" v-slot="row" :data="form.tableData" @getCurrent="getCurrent"&gt;
            &lt;SkyColumn :row="row.scope" prop="name" label="名称"&gt;

              &lt;SkyFormItem :prop="`tableData[${row.index}].name`" :rules="[
              { required: true, message: '请输入名称', trigger: 'blur' },
              ]"&gt;
                &lt;SkyInputPopUp v-model="row.scope.name" placeholder="请输入名称"&gt;&lt;/SkyInputPopUp&gt;
              &lt;/SkyFormItem&gt;

            &lt;/SkyColumn&gt;
            &lt;SkyColumn :row="row.scope" prop="type" label="单据类型"&gt; &lt;/SkyColumn&gt;
            &lt;SkyColumn :row="row.scope" prop="havemoney" label="已分摊金额"&gt;&lt;/SkyColumn&gt;
            &lt;SkyColumn :row="row.scope" prop="waitmoney" label="未分摊金额"&gt;&lt;/SkyColumn&gt;
          &lt;/SkyTable&gt;

          &lt;SkyTable v-slot="row" :data="form.tableData1" @getCurrent="getCurrent"&gt;
            &lt;SkyColumn :row="row.scope" prop="name" label="名称"&gt;

              &lt;SkyFormItem :prop="`tableData1[${row.index}].name`" :rules="[
              { required: true, message: '请输入名称', trigger: 'blur' },
              ]"&gt;
                &lt;SkyInputPopUp v-model="row.scope.name" placeholder="请输入名称"&gt;&lt;/SkyInputPopUp&gt;
              &lt;/SkyFormItem&gt;

            &lt;/SkyColumn&gt;
            &lt;SkyColumn :row="row.scope" prop="type" label="单据类型"&gt; &lt;/SkyColumn&gt;
            &lt;SkyColumn :row="row.scope" prop="havemoney" label="已分摊金额"&gt;&lt;/SkyColumn&gt;
            &lt;SkyColumn :row="row.scope" prop="waitmoney" label="未分摊金额"&gt;&lt;/SkyColumn&gt;
          &lt;/SkyTable&gt;
        &lt;/SkyForm&gt;

          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              
          export default {
            data () {
              return {
                form: {
                  info: {
                    username: "",
                    password: "",
                    describe: "",
                    date: ""
                  },
                  tableData: [
                    {
                      id: '1',
                      name: '人防工程监理(1)',
                      type: '单据类型',
                      havemoney: 1,
                      waitmoney: '200,000.00',
                    },
                    {
                      id: '2',
                      name: '人防工程监理(2)',
                      type: '单据类型',
                      havemoney: 2,
                      waitmoney: '200,000.00',
                    },
                    {
                      id: '3',
                      name: '人防工程监理(3)',
                      type: '单据类型',
                      havemoney: 3,
                      waitmoney: '200,000.00',
                    },
                    {
                      id: '4',
                      name: '人防工程监理(4)',
                      type: '单据类型',
                      havemoney: 4,
                      waitmoney: '200,000.00',
                    }
                  ],
                  tableData1: [
                    {
                      id: '1',
                      name: '人防工程监理(1)',
                      type: '单据类型',
                      havemoney: 1,
                      waitmoney: '200,000.00',
                    },
                    {
                      id: '2',
                      name: '人防工程监理(2)',
                      type: '单据类型',
                      havemoney: 2,
                      waitmoney: '200,000.00',
                    },
                    {
                      id: '3',
                      name: '',
                      type: '单据类型',
                      havemoney: 3,
                      waitmoney: '200,000.00',
                    },
                    {
                      id: '4',
                      name: '人防工程监理(4)',
                      type: '单据类型',
                      havemoney: 4,
                      waitmoney: '200,000.00',
                    }
                  ],
                },
                rules: {
                  info: {
                    username: [
                      { required: true, message: '请输入用户名', trigger: 'blur' },
                    ],
                    password: [
                      { required: true, message: '请输入用户密码', trigger: 'blur' },
                    ],
                    date: [
                      { required: true, message: '请选择日期', trigger: 'blur' },
                    ],
                    describe: [
                      { required: true, message: '请输入描述信息', trigger: 'blur' },
                    ],
                  }
                }

              }
            },
            methods: {
              getCurrent (row, eventType) {
                eventType === 'Single' ? console.log('你单击了') : console.log('你双击了')
                console.log(row)
              },
              submitForm (form) {
                // 表单全局校验
                this.$refs[form].validate(valid => {
                  if (valid) {
                    this.$SkyMessage('登录成功', 'success')
                  } else {
                    this.$SkyMessage('校验失败', 'error')
                  }
                })
              },
              reset (form) {
                this.$refs[form].resetFields()
              }
            }
          }
              
          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

  </div>
</template>

<script>
  export default {
    data () {
      return {
        form: {
          info: {
            username: "",
            password: "",
            describe: "",
            money: "100000000"
          },
          tableData: [
            {
              id: '1',
              name: '人防工程监理(1)',
              type: '单据类型',
              havemoney: 1,
              waitmoney: '200,000.00',
            },
            {
              id: '2',
              name: '人防工程监理(2)',
              type: '单据类型',
              havemoney: 2,
              waitmoney: '200,000.00',
            },
            {
              id: '3',
              name: '人防工程监理(3)',
              type: '单据类型',
              havemoney: 3,
              waitmoney: '200,000.00',
            },
            {
              id: '4',
              name: '人防工程监理(4)',
              type: '单据类型',
              havemoney: 4,
              waitmoney: '200,000.00',
            }
          ],
          tableData1: [
            {
              id: '1',
              name: '人防工程监理(1)',
              type: '单据类型',
              havemoney: 1,
              waitmoney: '200,000.00',
            },
            {
              id: '2',
              name: '人防工程监理(2)',
              type: '单据类型',
              havemoney: 2,
              waitmoney: '200,000.00',
            },
            {
              id: '3',
              name: '',
              type: '单据类型',
              havemoney: 3,
              waitmoney: '200,000.00',
            },
            {
              id: '4',
              name: '人防工程监理(4)',
              type: '单据类型',
              havemoney: 4,
              waitmoney: '200,000.00',
            }
          ],
        },
        rules: {
          info: {
            username: [
              { required: true, message: '请输入用户名', trigger: ['blur', "change"] },
            ],
            password: [
              { required: true, message: '请输入用户密码', trigger: ['blur', "change"] },
            ],
            money: [
              { required: true, message: '请输入存款', trigger: ['blur', "change"] },
            ],
            describe: [
              { required: true, message: '请输入描述信息', trigger: ['blur', "change"] },
            ],
          }
        }

      }
    },
    methods: {
      getCurrent (row, eventType) {
        eventType === 'Single' ? console.log('你单击了') : console.log('你双击了')
        console.log(row)
      },
      submitForm (form) {
        // 表单全局校验
        this.$refs[form].validate(valid => {
          if (valid) {
            this.$SkyMessage('登录成功', 'success')
          } else {
            this.$SkyMessage('校验失败', 'error')
          }
        })
      },
      reset (form) {
        this.$refs[form].resetFields()
      },
    }
  }

</script>

<style scoped>
</style>